
/*
学习目标:JSX中使用插值表达式-基本值
    总结：React中的插值表达式
    1、字符串、数字
    2、undefined、null、布尔总都不显示
*/
import React from "react";
// React负责：创建元素
// ReactDOM负责：渲染元素
import ReactDOM from "react-dom";


// 2.创建元素-虚拟DOM
// 语法：React.createElement('标签类型',{标签属性:值}，标签内容)
// JS class是关键字，React中类名要换成className
// const h1Node = React.createElement('div', { className: 'mydiv' }, 'hhhhh')
const name = '张三'
const h1Node = (
    <div>
        {/* 1.变量 */}
        变量：{name}
        {/* 基本类型：字符串、数字、布尔值、undefined、null */}
        <h1>字符串：{'张三'}</h1>
        <h1>数字：{18}</h1>
        {/* 可以放undefined.null 但不显示 */}
        <h2>undefined:{String(undefined)}</h2>
        <h2>null:{String(null)}</h2>
        {/* 布尔值 */}
        <h3>布尔值：{false}</h3>
    </div>
)



// 渲染元素
// ReactDOM.render(创建的React元素,真实DOM作为挂载点)
ReactDOM.render(h1Node, document.getElementById('root'))